<template>
		<view class="center">
			<view class="userinfo">
				<view class="pick">
				<uni-file-picker v-if="userInfo.avatar_file&&userInfo.avatar_file.url" v-model="userInfo.avatar_file"
					fileMediatype="image" :del-icon="false" return-type="object" :image-styles="listStyles" disablePreview
					disabled />
				<image v-else class="logo-img" src="/static/uni-center/defaultAvatarUrl.png"></image>
				</view>
			</view>
			
			
			
			<view class="table">
				<u-table v-for="item in rammend" align="left" >
						<u-tr>
							<u-th>快递大小:</u-th>
							<u-td>{{item.title}}</u-td>
						</u-tr>
						<u-tr>
							<u-th>联系人号码:</u-th>
							<u-td>{{item.phone}}</u-td>
						</u-tr>
						<u-tr>
							<u-th>地址:</u-th>
							<u-td>{{item.address}}</u-td>
						</u-tr>
						<u-tr>
							<u-th>时间:</u-th>
							<u-td>{{item.create_time}}</u-td>
						</u-tr>
						<u-tr>
							<u-th>备注:</u-th>
							<u-td>{{item.remark}}</u-td>
						</u-tr>
					</u-table>
			</view>
			<view class="button">
				<u-button @click="accept" type='primary' size="medium">立即接单</u-button>
			</view>
		<!-- <text v-for="item in rammend" >
		{{item.title}}
		联系人号码：{{item.phone}}
		地址：{{item.address}}
		备注：{{item.remark}}
		</text>
		<button @click="accept">立即接单</button> -->
		</view>
		
	
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				rammend:[],
				user_id:0,
				status:0,
				num1:1,
				num2:2,
				userInfo:[],
				listStyles: {
					"height": "150rpx", // 边框高度
					"width": "150rpx", // 边框宽度
					"border": { // 如果为 Boolean 值，可以控制边框显示与否
						"color": "#eee", // 边框颜色
						"width": "1px", // 边框宽度
						"style": "solid", // 边框样式
						"radius": "100%" // 边框圆角，支持百分比
					},
					"margin":"0 20px"
				}
			}
		},
		methods: {
			
			accept(){
				
				// //查询接单用户id
				// const db = uniCloud.database() //代码块为cdb
				// // 使用uni-clientDB
				// db.collection('uni-id-users')
				//   .where({
				//    _id: db.env.uid //传统MongoDB写法，不是jql写法。实际开发中推荐使用jql写法
				//   }).get()
				//   .then((res)=>{
				// 	this.user_id=db.env.uid
				//   }).catch((err)=>{
				//     console.log(err.code); // 打印错误码
				//         console.log(err.message); // 打印错误内容
				//   })
				const db = uniCloud.database();
				let collection = db.collection("uni-id-base-order")
				let res = collection.where({_id:this.id})
				  .update({
				    orderuser_id:this.$store.state.user.info._id,
					orderuser_phone:this.$store.state.user.info.mobile
				  }).then((res) => {
				        uni.showToast({
				            title: '接单成功'
				        })
						console.log(this.$store.state.user.info._id)
				    })
				this.status=2;
				
		},
		text(){
			console.log(this.$store.state.user.info)
		}
	},
	onLoad(options){
		this.userInfo=this.$store.state.user.info
		this.id=options._id
		const db = uniCloud.database() //代码块为cdb
		// 使用uni-clientDB
		db.collection('uni-id-base-order')
		  .where({
		   _id: this.id //传统MongoDB写法，不是jql写法。实际开发中推荐使用jql写法
		  }).get()
		  .then((res)=>{
			this.rammend=res.result.data
		  }).catch((err)=>{
		    console.log(err.code); // 打印错误码
		        console.log(err.message); // 打印错误内容
		  })
			
	
	},
	watch: {
		status(status, num2) {
			if (status) {
				this.status = ''
			} else {
				const db = uniCloud.database();
				let collection = db.collection("uni-id-base-order")
				let res = collection.where({_id:this.id})
				  .update({
				    status:2,
				  })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
		
}

.button{
	margin: 15px 135px;
	align-content: center;
}
.userinfo {
				width: 750rpx;
				padding: 20rpx;
				padding-top: 50px;
				background-image: url(../../static/uni-center/headers.png);
				flex-direction: column;
				align-items: center;
				.logo-img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 150rpx;
				}
				.pick{
					margin: 15px 150px;
				}
			}
</style>
